<template>
    <div class="upload-container">
        <file-upload :name="name" :title="title"></file-upload>
        <div class="upload-wrapper">
            <div class="back-nav" ref="backnav">
                <span style="cursor: pointer" @click="backnav">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" width="24" height="24" style="fill: #101010;">
                       <path d="M34.52 239.03L228.87 44.69c9.37-9.37 24.57-9.37 33.94 0l22.67 22.67c9.36 9.36 9.37 24.52.04 33.9L131.49 256l154.02 154.75c9.34 9.38 9.32 24.54-.04 33.9l-22.67 22.67c-9.37 9.37-24.57 9.37-33.94 0L34.52 272.97c-9.37-9.37-9.37-24.57 0-33.94z"></path>
                    </svg>
                </span>
            </div>
            <div class="upload-box">
                <el-upload
                        class="upload"
                        drag
                        :show-file-list="false"
                        :action="action"
                        :http-request="getFile"
                >
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="48" height="48" style="fill: rgba(24,144,255,1);">-->
                        <path d="M20 6h-8l-2-2H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2zm0 12H4V8h16v10z"/>
                    </svg>
                    <p class="title">将文件拖到此处，或<em>点击上传</em></p>
                    <div class="text">支持格式：.rar .zip .doc .docx .pdf，单个文件不能超过20MB</div>
                </el-upload>
                <div class="progress-wrapper" >
                    <p class="process-start" v-if="status === 'start'">未选择任何文件</p>
                    <div class="process" v-else-if="status === 'progress'">
                        <div class="progress-name">
                            {{filename}}
                            <span class="close-upload">x</span>
                        </div>
                        <el-progress class="el-progress" color="#1890FF" :show-text="false" :stroke-width="12" :percentage="percent"></el-progress>
                    </div>
                    <div class="process-end" v-else-if="status === 'end'">
                        上传完成
                        <span class="upload-name">{{filename}}</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import FileUpload from '../../base/file-upload/FileUpload'
    import { Http } from "../../util/http";
    import { ERROR_NO } from "../../util/config";
    import {messageMixin} from "../../common/js/mixin";

    export default {
        mixins: [messageMixin],
        data () {
            return {
                action: '',
                percent: 0,
                showUpload: true,
                status: 'start',
                filename: '',
                name: '',
                title: ''
            }
        },
        methods: {
            backnav () {
                this.$router.back()
            },
            onprogress (fileObj) {
                if (this.status !== 'progress') { this.status = fileObj.type}
                if (!this.name) { this.status = fileObj.type}
                this.percent = fileObj.loaded / fileObj.total * 100 >> 0
            },
            getFile (e) {
                this.filename = e.file.name
                this.formData.set('file', e.file)
                Http.upload({
                    url: e.action,
                    data: this.formData,
                }, this.onprogress).then(res => {
                    if (res.code === ERROR_NO) {
                        this.status = 'end'
                        this._messge({
                            message: res.message
                        })
                    }
                })
            },
            _uploadtype (path) {
                this.formData= new FormData()
                if (path === 'private') {
                    this.name = '个人文件区'
                    this.title = '本区域用于存放用户的个人文件'
                } else {
                    this.name = '文件共享区'
                    this.title = '本区域用于用户共享文件'
                    this.formData.set('introduce', '暂无简介')
                }
            }
        },
        created () {
            console.log(this.$route.query)
            const path = this.$route.query.path
            const folderId = this.$route.query.folderId
            this.action = Http.getUploadInfo(path, folderId)
            this._uploadtype(path)
        },
        components: {
            FileUpload
        }
    }
</script>

<style scoped lang="scss">
    @import "./src/common/scss/variable";
  .upload-container {
      min-height: 80vh;
      .upload-wrapper {
          width: 100%;
          height: 382px;
          padding: 22px 50px;
          box-sizing: border-box;
          border-radius: 20px;
          margin: 30px 0;
          color: $color-font;
          font-size: 14px;
          border: 1px solid $border-color;
          box-shadow: 0 13px 15px rgba(31, 45, 61, 0.15);
          transition: all 250ms;
          &:hover {
              opacity: .95;
              transform: translateY(7px);
              box-shadow: 0 3px 5px rgba(31, 45, 61, 0.2);
          }
          .back-nav {
              margin-bottom: 52px;
          }
          .upload-box {
              display: flex;
              align-items: center;
              justify-content: center;
              width: 100%;
              .upload {
                  /deep/ .el-upload-dragger {
                      display: flex;
                      flex-direction: column;
                      align-items: center;
                      justify-content: center;
                      border-radius: 4px;
                      background-color: rgba(0, 0, 0, 0.02);
                  }
                  .title {
                      margin: 21px 0 6px;
                      line-height: 22px;
                      color: rgba(0, 0, 0, 0.85);
                      font-size: 16px;
                      cursor: pointer;
                  }
                  .text {
                      line-height: 18px;
                      color: #aeaeb2;
                      font-size: 12px;
                      cursor: pointer;
                  }
              }
          }
          .progress-wrapper {
              margin-left: 90px;
              width: 574px;
              height: 100px;
              padding: 0 35px;
              box-sizing: border-box;
              border: 1px solid $border-color;
              cursor: pointer;
              .process-start {
                  width: 100%;
                  height: 100%;
                  display: flex;
                  align-items: center;
                  justify-content: center;
              }
              .process {
                  width: 100%;
                  height: 100%;
                  display: flex;
                  flex-direction: column;
                  align-items: center;
                  justify-content: center;
                  color: rgba(0, 0, 0, 0.45);
                  font-size: 14px;
                  .progress-name {
                      margin-bottom: 24px;
                  }
                  /deep/.el-progress {
                      width: 100%;
                  }
                  .progress-name {
                      width: 100%;
                      display: flex;
                      align-items: center;
                      .close-upload {
                          margin-left: auto;
                      }
                  }
              }
              .process-end {
                  width: 100%;
                  height: 100%;
                  display: flex;
                  align-items: center;
                  justify-content: space-between;
                  .upload-name {
                      margin-left: auto;
                  }
              }
              &:hover {
                  border: 1px dashed rgba(24, 144, 255, 100);
              }
          }
      }
  }
</style>
